function hoverSquare() {
    const items = document.querySelectorAll('.img-item');
    const defaultValues = [];

    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        const r = Math.floor(i / 3);
        const c = i % 3;

        const bgx = -c * 100 + '%';
        const bgy = -r * 100 + '%';
        const disx = (c - 1) * 20 + 'px';
        const disy = (r - 1) * 20 + 'px';

        item.style.setProperty('--bgx', bgx);
        item.style.setProperty('--bgy', bgy);
        item.style.setProperty('--disx', disx);
        item.style.setProperty('--disy', disy);

        defaultValues.push({ disx, disy });
    }

    return defaultValues;
}

const defaultValues = hoverSquare();
const imgs = document.querySelector('.imgs');
const items = document.querySelectorAll('.img-item');

imgs.addEventListener('mouseenter', () => {
    items.forEach(item => {
        item.style.setProperty('--disx', '0');
        item.style.setProperty('--disy', '0');
    });
});

imgs.addEventListener('mouseleave', () => {
    items.forEach((item, i) => {
        const { disx, disy } = defaultValues[i];
        item.style.setProperty('--disx', disx);
        item.style.setProperty('--disy', disy);
    });
});